<template>
    <div class="app-container">
        <div class="search-container" ref="search">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="default">
                <el-form-item label="商户号" prop="number">
                    <el-input v-model="queryParams.number" placeholder="输入商户号" clearable style="width: 200px" />
                </el-form-item>
                <el-form-item label="地区" prop="region_name">
                    <el-input v-model="queryParams.region_name" placeholder="输入地区" clearable style="width: 200px" />
                </el-form-item>
                <el-form-item label="商户名称" prop="full_name">
                    <el-input v-model="queryParams.full_name" placeholder="输入商户名称" clearable style="width: 200px" />
                </el-form-item>
                <el-form-item label="社会单位名称" prop="unit_name">
                    <el-input v-model="queryParams.unit_name" placeholder="输入社会单位名称" clearable style="width: 200px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
                    <el-button @click="resetQuery">
                        <i-ep-refresh />
                        重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card shadow="never">
            <template #header>
                <el-button size="default" type="primary" @click="addEditSocialUnit">添加</el-button>
            </template>
            <el-table :height="pageHeight + 'px'" :data="tableData" :default-sort="{ prop: 'id', order: 'ascending' }"
                v-loading="tableDataLoading">
                <el-table-column align="center" label="商户号" prop="number"> </el-table-column>
                <el-table-column align="center" label="地区" prop="region_name"> </el-table-column>
                <el-table-column align="center" label="商户名称" prop="name"> </el-table-column>
                <el-table-column align="center" label="社会单位名称" prop="unit_name"> </el-table-column>
                <!-- <el-table-column align="center" label="三关一闭">
                    <template #default="scope">
                        <el-button type="primary" size="default"
                            @click="hanldeClose(scope.$index, scope.row)">三关一闭</el-button>
                    </template>
                </el-table-column> -->
                <el-table-column align="center" label="任务巡查">
                    <template #default="scope">
                        <el-button type="primary" size="default"
                            @click="toTaskList(scope.$index, scope.row)">任务巡查</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户管理">
                    <template #default="scope">
                        <el-button type="success" size="default"
                            @click="toUser(scope.$index, scope.row)">用户管理</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="巡查点" prop="unit_name">
                    <template #default="scope">
                        <el-button type="primary" plain size="default"
                            @click="patrol(scope.$index, scope.row)">巡查点</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="二维码管理" prop="unit_name">
                    <template #default="scope">
                        <el-button type="success" plain size="default" @click="qrcode(scope.$index, scope.row)">
                            二维码管理
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" fixed="right" width="300">
                    <!-- <template #header>
                        <el-button size="mini" type="primary" @click="addEditSocialUnit">添加</el-button>
                    </template> -->
                    <template #default="scope">
                        <el-button size="default" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-popconfirm title="您确定删除吗？" @confirm="deleteMechant(scope.row)">
                            <template #reference>
                                <el-button size="default" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button size="default" type="primary" @click="lookDetails(scope.row)">详情</el-button>
                        <!-- <div style="margin-top: 10px">
                            <el-button type="primary" size="mini"
                                @click="onEmergency(scope.row.architecture)">商户架构</el-button>
                            <el-button type="primary" size="mini"
                                @click="onEmergency(scope.row.emergency_plan)">应急预案</el-button>
                        </div> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination :current-page="page" :total="total" :page-size="pageSize" :page-sizes="pagination.sizes"
                    :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background
                    @size-change="onSizeChange" @current-change="onCurrentChange" />
            </div>
        </el-card>
        <!-- <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.page"
          :page-count="tableDataInfo.total_page"
          layout="prev, pager, next, jumper"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div> -->
        <el-dialog v-model="dialogFormVisible" width="1200px" @close="closeDialog" :close-on-click-modal="false"
            destroy-on-close>
            <el-form ref="childForm" :rules="rules" :model="formData" :disabled="disabled">
                <el-row>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="商户简称" prop="name">
                            <el-input v-model="formData.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="商户号" prop="number">
                            <el-input v-model="formData.number"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="商户全称" prop="full_name">
                            <el-input v-model="formData.full_name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col></el-col>
                    <el-col :span="17" :offset="1">
                        <el-form-item label="商户地址" prop="address">
                            <el-input v-model="formData.address"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8" :offset="1">
            <el-form-item label="单位坐标" prop="longitude">
              <div style="display: flex; align-item: center">
                <el-input style="width: 40%; margin-right: 1%" disabled v-model="formData.longitude"></el-input>
                <el-input style="width: 40%; margin-right: 1%" disabled v-model="formData.latitude"></el-input>

                <el-button @click="mapIsShow = true">定位</el-button>
              </div>
            </el-form-item>
          </el-col> -->
                    <!-- <el-col :span="6" :offset="1">
            <el-form-item label="巡查点位选择" prop="point_id">
              <el-select v-model="formData.point_id" placeholder="请选择" no-data-text="暂无巡查点位">
                <el-option
                  v-for="item in pointList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
                    <!-- 门前三包 -->
                    <!-- <el-col :span="4" :offset="1">
            <el-form-item label="门前三包" prop="door_front_file">
              <el-upload :action="upDataUrl + '/unit/upload/upload'" :on-change="doorChange" :file-list="doorFileList"
                :headers="upLoadImgHeader" :data="upLoadImgData" limit="1" :on-exceed="onExceed"
                :on-success="doorFileUpSuccess" list-type="picture-card" class="door" :before-remove="doorRemove"
                accept=".jpg,.png,.jpeg">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col> -->
                    <!-- 安全承诺书 -->
                    <el-col :span="7" :offset="1">
                        <el-form-item label="安全承诺书" prop="safe_promise_file">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :on-change="safeChange"
                                :file-list="safeFileList" :headers="upLoadImgHeader" :data="upLoadImgData" limit="1"
                                :on-exceed="onExceed" :on-success="safeFileUpSuccess" list-type="picture-card"
                                class="safe" :before-remove="safeRemove" accept=".jpg,.png,.jpeg">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <!-- 三自主两公开一承诺 -->
                    <el-col :span="7" :offset="1">
                        <el-form-item label="三自主两公开一承诺" prop="org_promise_file">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :on-change="orgChange"
                                :file-list="orgFileList" :headers="upLoadImgHeader" :data="upLoadImgData" limit="1"
                                :on-exceed="onExceed" :on-success="orgFileUpSuccess"
                                :on-preview="handlePictureCardPreview" list-type="picture-card" class="org"
                                :before-remove="orgRemove" accept=".jpg,.png,.jpeg">
                                <i class="el-icon el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <!-- 疏散路线图 -->
                    <el-col :span="7" :offset="1">
                        <el-form-item label="疏散路线图" prop="escape_map">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                                :file-list="imgFileList" :headers="upLoadImgHeader" :data="upLoadImgData" limit="1"
                                :on-exceed="onExceed" :on-success="imgUpSuccess" class="evacuate"
                                :before-remove="imgRemove" :on-change="imgChange" accept=".jpg,.png,.jpeg">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-form-item label="商户架构" prop="architecture">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :file-list="fileList1"
                                :headers="upLoadImgHeader" :data="upLoadImgData" limit="1" :on-exceed="onExceed"
                                :on-success="fileUpSuccess" :on-preview="handlePictureCardPreview"
                                list-type="picture-card" class="org" :before-remove="orgRemove"
                                accept=".jpg,.png,.jpeg">
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-form-item label="应急预案" prop="emergency_plan">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :file-list="fileList2"
                                :headers="upLoadImgHeader" :data="upLoadImgData" limit="1" :on-exceed="onExceed"
                                :on-success="fileUpSuccess2" :on-preview="handlePictureCardPreview"
                                list-type="picture-card" class="org" :before-remove="orgRemove"
                                accept=".jpg,.png,.jpeg">
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-form-item label="住建备案证" prop="emergency_plan">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :file-list="fileList3"
                                :headers="upLoadImgHeader" :data="upLoadImgData" limit="1" :on-exceed="onExceed"
                                :on-success="fileUpSuccess3" :on-preview="handlePictureCardPreview"
                                list-type="picture-card" class="org" :before-remove="orgRemove"
                                accept=".jpg,.png,.jpeg">
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-form-item label="开业检查证" prop="emergency_plan">
                            <el-upload :action="upDataUrl + '/unit/upload/upload'" :file-list="fileList4"
                                :headers="upLoadImgHeader" :data="upLoadImgData" limit="1" :on-exceed="onExceed"
                                :on-success="fileUpSuccess4" :on-preview="handlePictureCardPreview"
                                list-type="picture-card" class="org" :before-remove="orgRemove"
                                accept=".jpg,.png,.jpeg">
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6"></el-col>
                    <el-col :span="6"></el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="安全责任人姓名" prop="safety_name">
                            <el-input v-model="formData.safety_name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="安全责任人电话" prop="safety_mobile">
                            <el-input v-model="formData.safety_mobile" oninput="value=value.replace(/[^\d]/g,'')"
                                :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col></el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="安全管理员姓名" prop="scseca_name"><el-input
                                v-model="formData.scseca_name"></el-input></el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="安全管理员电话" prop="scseca_mobile"><el-input v-model="formData.scseca_mobile"
                                oninput="value=value.replace(/[^\d]/g,'')" :maxlength="11"></el-input></el-form-item>
                    </el-col>
                    <el-col></el-col>
                    <el-col :span="6" :offset="1">
                        <el-form-item label="状态">
                            <el-switch v-model="formData.status" active-text="正常" inactive-text="禁用" :active-value="1"
                                :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm" v-if="!disabled">确 定</el-button>
                </span>
            </template>
            <!-- 地图 -->
            <div class="mapBox" v-show="mapIsShow">
                <div class="search">
                    <span type="primary">搜索</span>
                    <el-input placeholder="请输入内容" v-model="searchInput" @input="inputChange">
                        <template #prefix>
                            <i class="el-input__icon el-icon-search"></i>
                        </template>
                    </el-input>
                </div>
                <div id="container"></div>
                <div class="btnBox">
                    <el-button type="primary" class="btn" @click="mapIsShow = false">确定</el-button>
                    <el-button @click="cancelMap">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="应急预案" v-model="dialogVisible" width="30%">
            <el-image :src="imgs" :preview-src-list="[imgs]"></el-image>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisibleImg">
            <img style="width: 100%" :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </div>
</template>
<script>
import storage from '@/util/storage'
import { ElMessage } from 'element-plus'
// 分页
import paginationMixin from '@/mixins/pagination'
import { nextTick } from 'vue'
import { Plus } from '@element-plus/icons-vue'
export default {
    // 分页
    mixins: [paginationMixin],
    name: 'sociolUnitChildPage',
    data() {
        return {
            imgs: '',
            searchValue: '',
            total: 0,
            searchValue: '',
            mapIsShow: false,
            dialogVisibleImg: false,
            queryParams: {

            },
            dialogImageUrl: '',
            upLoadImgData: {
                type: 'image'
            },
            fileList1: [],
            fileList2: [],
            fileList3: [],
            fileList4: [],
            imgFileList: [],
            doorFileList: [],
            safeFileList: [],
            orgFileList: [],
            disabled: false,
            upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
            tableData: [],
            tableDataLoading: false,
            search: '',
            tableDataInfo: '',
            fatherId: '',
            dialogFormVisible: false,
            dialogVisible: false,
            formData: {
                name: '',
                full_name: '',
                address: '',
                longitude: '0',
                latitude: '0',
                escape_map: '',
                safe_promise_file: '',
                architecture: '',
                emergency_plan: '',
                org_promise_file: '',
                safety_name: '',
                safety_mobile: '',
                scseca_name: '',
                scseca_mobile: '',
                status: 1
                // point_id: 0,
            },
            rules: {
                name: [{ required: true, message: '请输入商户简称', trigger: 'blur' }],
                number: [{ required: true, message: '请输入商户号', trigger: 'blur' }],
                full_name: [{ required: true, message: '请输入', trigger: 'blur' }],
                address: [{ required: true, message: '请输入', trigger: 'blur' }],
                escape_map: [{ required: true, message: '请上传', trigger: 'blur' }],
                safe_promise_file: [{ required: true, message: '请上传', trigger: 'blur' }],
                org_promise_file: [{ required: true, message: '请上传', trigger: 'blur' }],
                safety_name: [{ required: true, message: '请输入', trigger: 'blur' }],
                // safety_mobile: [
                //     { required: true, message: '请输入', trigger: 'blur' },
                //     { min: 11, max: 11, trigger: 'blur', message: '请输入正确的手机号' },
                //     {
                //         required: true,
                //         pattern:
                //             /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
                //         message: '请输入正确的手机号',
                //         trigger: 'blur'
                //     } //正则
                // ],
                scseca_name: [{ required: true, message: '请输入', trigger: 'blur' }],
                // scseca_mobile: [
                //     { required: true, message: '请输入', trigger: 'blur' },
                //     { min: 11, max: 11, trigger: 'blur', message: '请输入正确的手机号' },
                //     {
                //         required: true,
                //         pattern:
                //             /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
                //         message: '请输入正确的手机号',
                //         trigger: 'blur'
                //     } //正则
                // ]
                // point_id: [{ required: true, message: "请选择", trigger: "blur" }],
            },
            id: '',
            pageHeight: 0,
            page: 1,
            pageSize: 10
            //   pointList:[]
        }
    },
    components: { Plus },
    watch: {
        mapIsShow(newData) {
            if (!newData) {
                this.searchInput = ''
            }
        }
    },
    computed: {
        upLoadImgHeader() {
            return {
                'A-Token': this.$store.state.user.a_token,
                'U-Token': this.$store.state.user.u_token
            }
        }
    },
    mounted() {
        this.pageHeight = window.innerHeight - this.$refs.search.clientHeight - 280;
    },
    created() {
        this.fatherId = this.$route.query.unit_id
        // this.$api.post('/unit/PatrolPosition/lists',{unit_id:this.$route.query.id}).then(res=>{
        //     this.pointList=res.data.lists
        // })
        this.getDataList()
    },

    methods: {
        hanldeClose(row){
            this.$router.push({ name: 'thirdOneClose2', query: { id: row }})
        },
        onCurrentChange(page) {
            this.page = page;
            this.getDataList();
        },
        onSizeChange(page) {
            console.log(page);
        },
        handleQuery() {
            this.page = 1;
            this.getDataList();
        },
        resetQuery() {
            this.page = 1;
            this.$refs['queryFormRef'].resetFields();
            this.getDataList()
        },
        handlePictureCardPreview(uploadFile) {
            console.log(uploadFile)
            this.dialogImageUrl = uploadFile.url
            this.dialogVisibleImg = true
        },
        deleteMechant(row) {
            this.$api.post('/unit/YjUnit/SubUnitSave', { status: -1, id: row.id }).then((res) => {
                this.$message.success('操作成功')
                this.getDataList()
            })
        },
        onEmergency(img) {
            this.dialogVisible = true
            this.imgs = import.meta.env.VITE_APP_API_BASEURL + img
        },
        toTaskList(index, row) {
            this.$router.push({
                name: 'unitSubTaskMange',
                query: {
                    sub_unit_id: row.id
                }
            })
        },
        qrcode(index, row) {
            this.$router.push({
                name: 'qrcode',
                query: {
                    id: row.id
                    //   unitIdFromChild: row.unit_id,
                    //   from: 'unit_child'
                }
            })
        },
        patrol(index, row) {
            this.$router.push({
                name: 'patrolPoint',
                query: {
                    id: row.id
                    //   unitIdFromChild: row.unit_id,
                    //   from: 'unit_child'
                }
            })
        },
        inputChange() {
            this.$getMap(this, this.searchInput)
        },
        cancelMap() {
            this.formData.longitude = ''
            this.formData.latitude = ''
            this.mapIsShow = false
        },
        fileUpSuccess(res) {
            this.formData.architecture = res.data.result
        },
        fileUpSuccess2(res) {
            this.formData.emergency_plan = res.data.result
        },
        fileUpSuccess3(res) {
            this.formData.housing_image = res.data.result
        },
        fileUpSuccess4(res) {
            this.formData.ky_image = res.data.result
        },
        getLatLng() {
            this.$getLocaion(returnCitySN['cip']).then((res) => {
                let temp = res.data.location.split(',')
                this.formData.longitude = temp[0] //经度
                this.formData.latitude = temp[1] //纬度
            })
        },
        safeFileUpSuccess(res) {
            this.formData.safe_promise_file = res.data.result
        },
        // 查看详情
        lookDetails(row) {
            this.disabled = true
            this.id = row.id
            // this.point_id = row.point_id;
            this.formData = JSON.parse(JSON.stringify(row))
            this.dialogFormVisible = true
            this.imgFileList = [{ url: this.upDataUrl + row.escape_map }]
            this.doorFileList = [{ url: this.upDataUrl + row.door_front_file }]
            this.safeFileList = [{ url: this.upDataUrl + row.safe_promise_file }]
            this.orgFileList = [{ url: this.upDataUrl + row.org_promise_file }]
            this.fileList1 = [{ url: this.upDataUrl + row.architecture }]
            this.fileList2 = [{ url: this.upDataUrl + row.emergency_plan }]
            this.fileList3 = [{ url: this.upDataUrl + row.housing_image }]
            this.fileList4 = [{ url: this.upDataUrl + row.ky_image }]
            // setTimeout(() => {
            //   let door = document.getElementsByClassName("door")[0];
            //   door.children[0].children[1].style.display = "none";
            //   let evacuate = document.getElementsByClassName("evacuate")[0];
            //   evacuate.children[0].children[1].style.display = "none";
            //   let safe = document.getElementsByClassName("safe")[0];
            //   safe.children[0].children[1].style.display = "none";
            //   let org = document.getElementsByClassName("org")[0];
            //   org.children[0].children[1].style.display = "none";
            // }, 100);
        },
        orgFileUpSuccess(res) {
            this.formData.org_promise_file = res.data.result
        },
        imgUpSuccess(res) {
            this.formData.escape_map = res.data.result
        },
        doorFileUpSuccess(res) {
            this.formData.door_front_file = res.data.result
        },
        onExceed() {
            this.$message({
                showClose: true,
                message: '如需更改，请先删除已上传的',
                type: 'error'
            })
        },
        // 获取列表
        getDataList() {
            this.tableDataLoading = true
            let query = {
                rows: this.pageSize,
                page: this.page,
                ...this.queryParams
            }
            this.$api
                .post('/unit/YjUnit/SubUnitLists', query)
                .then((res) => {
                    this.tableData = res.data.list
                    this.tableDataInfo = res.data
                    this.total = res.data.total
                })
                .finally(() => {
                    this.tableDataLoading = false
                })
        },
        // 搜索
        // 点击修改
        handleEdit(index, row) {
            this.id = row.id
            //   this.point_id = row.point_id;
            this.formData = JSON.parse(JSON.stringify(row))
            this.dialogFormVisible = true
            nextTick(() => {
                this.$getMap(this)
            })
            this.imgFileList = [{ url: this.upDataUrl + row.escape_map }]
            this.doorFileList = [{ url: this.upDataUrl + row.door_front_file }]
            this.safeFileList = [{ url: this.upDataUrl + row.safe_promise_file }]
            this.orgFileList = [{ url: this.upDataUrl + row.org_promise_file }]
            this.fileList1 = [{ url: this.upDataUrl + row.architecture }]
            this.fileList2 = [{ url: this.upDataUrl + row.emergency_plan }]
            this.fileList3 = [{ url: this.upDataUrl + row.housing_image }]
            this.fileList4 = [{ url: this.upDataUrl + row.ky_image }]
            // setTimeout(() => {
            //   let door = document.getElementsByClassName("door")[0];
            //   door.children[0].children[1].style.display = "none";
            //   let evacuate = document.getElementsByClassName("evacuate")[0];
            //   evacuate.children[0].children[1].style.display = "none";
            //   let safe = document.getElementsByClassName("safe")[0];
            //   safe.children[0].children[1].style.display = "none";
            //   let org = document.getElementsByClassName("org")[0];
            //   org.children[0].children[1].style.display = "none";
            // }, 100);
        },
        handleSizeChange(e) { },
        handleCurrentChange(e) {
            this.getDataList(e)
        },
        addEditSocialUnit() {
            this.dialogFormVisible = true
            nextTick(() => {
                this.$getMap(this)
            })
        },
        closeDialog() {
            this.$refs.childForm.resetFields()
            let temp = this.formData
            for (let key in temp) {
                temp[key] = ''
            }
            this.formData = temp
            this.id = ''
            this.disabled = false
            this.imgFileList = []
            this.fileList = []
            this.doorFileList = []
            this.safeFileList = []
            this.fileList1 = []
            this.fileList2 = []
            this.orgFileList = []
            this.formData.status = 1
            // let door = document.getElementsByClassName("door")[0];
            // let evacuate = document.getElementsByClassName("evacuate")[0];
            // let safe = document.getElementsByClassName("safe")[0];
            // let org = document.getElementsByClassName("org")[0];
            // nextTick(() => {
            //   door.children[0].children.length > 1 && (door.children[0].children[1].style.display = "block");
            //   evacuate.children[0].children.length > 1 && (evacuate.children[0].children[1].style.display = "block");
            //   safe.children[0].children.length > 1 && (safe.children[0].children[1].style.display = "block");
            //   org.children[0].children.length > 1 && (org.children[0].children[1].style.display = "block");
            // })
        },
        toUser(index, row) {
            this.$router.push({
                name: 'merchantUserMange',
                query: {
                    sub_unit_id: row.id
                }
            })
        },
        submitForm() {
            console.log(this.formData)
            this.$refs.childForm.validate((valid) => {
                if (valid) {
                    this.formData.latitude = 0
                    this.formData.longitude = 0
                    let data = this.formData
                    if (this.id) {
                        data.id = this.id
                    } else {
                        data.id = 0
                    }
                    //   this.$api.post("/unit/YjUnit/SubUnitSave", data).then(() => {
                    this.$api.post('/unit/YjUnit/SubUnitSave', this.formData).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: res.msg
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            })
                        }
                        this.getDataList()
                        this.dialogFormVisible = false
                    })
                } else {
                    ElMessage.error('请填写完整')
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.block {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.mapBox {
    z-index: 50;
    width: 800px;
    background-color: rgba(236, 234, 234, 0.938);
    height: 600px;
    position: fixed;
    top: 50%;
    left: 30%;
    transform: translateY(-60%);
    flex-direction: column;

    #container {
        z-index: 100;
        width: 800px;
        height: 500px;
    }

    .btnBox {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 200px;
    }

    .search {
        display: flex;

        span {
            width: 100px;
            background-color: rgb(245, 244, 244);
            line-height: 40px;
            text-align: center;
        }
    }
}

.searchBox {
    display: flex;

    span {
        width: 50px;
        line-height: 40px;
        text-align: center;
    }

    .search {
        width: 30%;
    }
}

.searchMain {
    height: 80px;
}
</style>
